<template>
  <div class="map">
    <TresCanvas window-size clear-color="#000000">
      <TresPerspectiveCamera :position="[0, -70, 90]" :look-at="[0, 0, 0]" />
      <OrbitControls
        @change="change"
        :enableDamping="true"
        :dampingFactor="0.25"
        :rotate-speed="0.35"
      />

      <TresDirectionalLight
        :position="[0, 2, 4]"
        :intensity="1.2"
        cast-shadow
      />
      <Area />
      <Helper></Helper>
    </TresCanvas>
    <div
      v-for="(item, index) in lableManager"
      :style="{
        left: item.left + 'px',
        top: item.top + 'px',
        position: 'absolute',
        color: '#ffff',
      }"
    >
      {{ item.name }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { TresCanvas } from "@tresjs/core";
import { OrbitControls } from "@tresjs/cientos";
import Area from "./components/area.vue";
import Helper from "./components/helper.vue";
import { lableManager } from "./store/index";
const change = () => {
  for (const iterator of lableManager.value) {
    console.log(iterator);

    iterator.update();
  }
};
</script>
<style scoped>
.map {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
</style>
